<template>
  <div class="breadcrumb-box">
    <el-breadcrumb separator="/">
      <transition-group>
        <el-breadcrumb-item class="item" mode="out-in" :key="1">
          <div class="el-breadcrumb__inner">
            <el-icon class="a" :size="20">
              <Edit />
            </el-icon>
            <span class="b">首页</span>
          </div>
        </el-breadcrumb-item>
        <el-breadcrumb-item mode="out-in" :key="1">
          <div class="el-breadcrumb__inner">
            <el-icon class="a" :size="20">
              <Edit />
            </el-icon>
            <span class="b">首页</span>
          </div>
        </el-breadcrumb-item>
      </transition-group>
    </el-breadcrumb>
  </div>
</template>

<script setup>
</script>

<style lang="scss" scoped>
.breadcrumb-box {
  mask-image: linear-gradient(
    90deg,
    #000000 0%,
    #000000 calc(100% - 50px),
    transparent
  );

  .el-breadcrumb__inner {
    display: flex;
    cursor: pointer;
    //   font-weight: 600;
    align-items: center;
    .a {
      margin-right: 6px;
    }
    &:hover {
      color: var(--el-color-primary);
    }
  }
}
</style>